<template>
    <div>
        <van-nav-bar title="网易严选" size="19px">
            <template #right>
                <van-icon name="search" size="25" color="black" />
                <van-icon name="shopping-cart-o" size="25" color="black" />

            </template>
            <template #left>
                <van-icon name="home-o" size="25" @click="fun()" color="black" />
            </template>
        </van-nav-bar>
        <div class="one">

            <van-tabs v-model="active" swipeable @click="onClick" sticky animated>
                <van-tab v-for="(v, index) in obj" :title="v" :key="index">
                </van-tab>
            </van-tabs>
        </div>
        <div class="first">
            <div class="two" v-for="(v, index) in obj1" :key="index" @click="mydetails(v.proid)">
                <div class="top">
                    <div class="left"><img :src="v.img1" alt=""></div>
                    <div class="right">
                        <div class="smtop">{{ v.category }}</div>
                        <div class="smbottom">
                            <span style=" float: left; font-weight: bold; font-size: 20px; color: red;">￥</span>
                            <p
                                style=" line-height: 30px; text-align: center; float: left; display: block; width: 30px; height: 30px; font-weight: bold; font-size: 18px; color: red;">
                                {{ v.originprice }}</p>
                            <div class="three" @click="save(v.proid)">
                                马上抢
                                <van-icon name="arrow" />

                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">{{ v.brand }}</div>

            </div>

        </div>


    </div>
</template>

<script>
import { ref } from 'vue';
import axios from "axios"
let service = axios.create()

export default {
    data() {
        return {
            active: 0,
            obj: [],
            txt: '显卡',
            obj1: []


        }
    },
    methods: {

        onClick(v, v1) {
            this.obj1 = []
            service({
                url: 'http://118.178.238.19:3001/api/pro/search',
                method: 'get',
                params: {
                    keyword: v1,
                    limitNum: 20
                }
            }).then(res => {
                if (res.data.data != undefined) {
                    res.data.data.forEach(element => {
                        this.obj1.push(element)
                    });
                }
            })
        },
        fun1() {
            this.$router.push('/homepage')
        },
        mydetails(v) {
            this.$router.push({ path: '/details', query: { id: v } })
        },
        fun() {
            this.$router.go(-1)
        }
    }
    ,
    mounted() {
        service({
            url: 'http://118.178.238.19:3001/api/pro/categorylist',
            method: 'get',
        }).then(res => {
            this.obj = res.data.data
        }),
            service({
                url: 'http://118.178.238.19:3001/api/pro/search',
                method: 'get',
                params: {
                    keyword: this.txt,
                    limitNum: 20
                }
            }).then(res => {
                res.data.data.forEach(element => {
                    this.obj1.push(element)
                });

            })
    }

};

</script>

<style  scoped>
body {
    background-color: #eee;
}

.van-nav-bar__right {
    display: flex;
    justify-content: space-around;
    width: 6.25rem;
}

.one {
    width: 100%;
    /* height: 20000px; */
    /* height: 31.25rem; */
    height: 16.5rem;
    background: url(../../../assets/23ebcca65dfb159564fbee8aaacff6e4.webp) center /100% 100% no-repeat;
    position: relative;
    /* overflow: hidden; */
}

.van-tabs {
    position: absolute;
    top: 9.375rem;
    width: 100%;
}

.two {
    width: 95%;
    margin: auto;
    /* margin-top:12.5rem; */
    height: 10.4375rem;
    /* background-color: red; */
    background-color: #fff;
    border-radius: 5px 5px;
    /* position: absolute; */
    /* z-index: 9999; */
    /* top: 220px; */
}

.first {
    width: 100%;
    height: auto;
    position: absolute;
    top: 15.625rem;
}

.top {
    width: 98%;
    height: 7.5rem;
    /* background-color: aqua; */
    margin: auto;
    margin-top: .25rem;
}

.bottom {
    width: 98%;
    height: 2.5rem;
    background-color: aliceblue;
    margin: auto;
    margin-top: .25rem;
    text-align: center;
    line-height: 2.5rem;

}

.left {
    width: 7.5rem;
    height: 7.5rem;
    /* background-color: blueviolet; */
    float: left;
}

.right {
    width: calc(98% - 7.5rem);
    height: 7.5rem;
    /* background-color: brown; */
    float: right;
    position: relative;
}

.smtop {
    width: 90%;
    height: 2.625rem;
    /* background-color: cadetblue; */
    font-size: .75rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 1.25rem;
}

.smbottom {
    width: 90%;
    height: 1.5rem;
    /* background-color: coral; */
    position: absolute;
    bottom: .3125rem;
    font-size: .75rem;
}

.left img {
    width: 100%;
    height: 100%;
}

.three {
    float: right;
    width: 3.75rem;
    height: 1.25rem;
    border-radius: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
    text-align: center;
}
</style>